<style>
.__cov-progress {
  position: fixed;
  opacity: 1;
  z-index: 999999;
}
</style>
<template>
  <div class="__cov-progress" :style="style"></div>
</template>
<script>
const inBrowser = typeof window !== 'undefined'
export default {
  name: 'VueProgress',
  serverCacheKey: () => 'Progress',
  computed: {
    style() {
      let location = this.progress.options.location;
      let style = {
        'background-color': this.progress.options.canSuccess ? this.progress.options.color : this.progress.options.failedColor,
        'opacity': this.progress.options.show ? 1 : 0
      }
      if (location == 'top' || location == 'bottom') {
        location === 'top' ? style.top = '0px' : style.bottom = '0px'
        if (!this.progress.options.inverse) {
          style.left = '0px'
        } else {
          style.right = '0px'
        }
        style.width = this.progress.percent + '%'
        style.height = this.progress.options.thickness
        style.transition = "width " + this.progress.options.transition.speed + ", opacity " + this.progress.options.transition.opacity
      } else if (location == 'left' || location == 'right') {
        location === 'left' ? style.left = '0px' : style.right = '0px'
        if (!this.progress.options.inverse) {
          style.bottom = '0px'
        } else {
          style.top = '0px'
        }
        style.height = this.progress.percent + '%'
        style.width = this.progress.options.thickness
        style.transition = "height " + this.progress.options.transition.speed + ", opacity " + this.progress.options.transition.opacity
      }
      return style;
    },
    progress() {
      if (inBrowser) {
        return window.VueProgressBarEventBus.RADON_LOADING_BAR
      } else {
        return {
          percent: 0,
          options: {
            canSuccess: true,
            show: false,
            color: 'rgb(19, 91, 55)',
            failedColor: 'red',
            thickness: '2px',
            transition: {
              speed: '0.2s',
              opacity: '0.6s',
              termination: 300
            },
            location: 'top',
            autoRevert: true,
            inverse: false
          }
        }
      }
    }
  }
}

</script>
